<!-- <template>
	<view class="content">
		<!-- 搜索框 -->
		
		<!-- 顶部地址栏 -->
		<view class="address">
			<view class="city" >{{city}}</view>
			<view class="hen">-</view>
			<view class="county">{{county}}</view>
			<view class="hen">-</view>
			<view class="town">{{town}}</view>
			<view class="hen">-</view>
			<view class="village">{{village}}</view>
			<view class="hen">-</view>
			<view class="personal">{{personal}}</view>
		</view>
		
		<!-- 村干部信息 -->
		<view class="cadres">
			<view class="cadres_li">挂联村干部:{{cadres_name}}</view>
			<view class="cadres_li">联系方式:{{cadres_phone}}</view>
		</view>

		<!-- 顶部导航栏 -->
		<view class="horizonal-tab">
			<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-into-view="'top'+ tabIndex">
				<block v-for="(item,index) in tabBars" :key="index">
					<view class="scroll-tab-item" :class="{'active': tabIndex==index} " @tap="toggleTab(index)" :id="'top'+ index">
						{{item.farmName}}
						<view class="scroll-tab-line"></view>
					</view>
				</block>
			</scroll-view>
		</view>

		<!-- 内容区 -->
		<view class="content">
			<!-- 滑块视图 -->
			<view class="content_view">
				
				<view class="content_view_head">
				<swiper :current="tabIndex" style="height:2100rpx;" @change="tabChange">
					<!-- current:当前所在滑块的index -->					
					
					<swiper-item v-for="(content,index) in contentList" :key="index">
						
						<!-- 数据模块 -->
						<view class="content_view_central_list">
							<view class="content_view_central_list_li">
								 <view class="content_view_central_list_li_left"
								 style="background-color: #5555ff;">
									<p>挂联干部</p>
								 </view>
								 <view class="content_view_central_list_li_right">
									 <view class="content_view_central_list_li_right_li">
										 干部姓名: {{content.farmLianliancunCadres}} 
									 </view>
									 <view class="xian"></view>
									 <view class="content_view_central_list_li_right_li">
									 	干部联系方式: {{content.farmCadresPhone}} 
									 </view>
									 
								 </view>
							</view>
							<view class="content_view_central_list_li">
								 <view class="content_view_central_list_li_left"
								 style="background-color: #00aa7f;">
									<p>养殖户信息</p>
								 </view>
								 <view class="content_view_central_list_li_right">
									 <view class="content_view_central_list_li_right_li">
										 姓名: {{content.farmFarmers}} 
									 </view>
									 <view class="xian"></view>
									 <view class="content_view_central_list_li_right_li">
									 	电话: {{content.farmFarmersPhones}}
									 </view>
									 <view class="xian"></view>
									 <view class="content_view_central_list_li_right_li">
									 	防疫合格证: {{content.farmCertificate}}
									 </view>
									 <view class="xian"></view>
									 <view class="content_view_central_list_li_right_li">
									 	是否是禁养区: {{content.farmProhibitedArea}} 
									  </view>
								 </view>
							</view>
							
							
								<view class="content_view_central_list_li">
									 <view class="content_view_central_list_li_left"
									 style="background-color: #83c986;">
										<p>存栏</p>
									 </view>
									 <view class="content_view_central_list_li_right">
										 <view class="content_view_central_list_li_right_li">
											<view class="content_view_central_list_li_right_li">
												栏舍畜牧合计: {{content.farmSeed}} 头
											</view> 
										
										 </view>
										 
									 </view>
								</view>
								<view class="content_view_central_list_li">
									<view class="content_view_central_list_li_left"
									style="background-color: #d9af90;">
										<p>栏舍面积</p>
									</view>
									<view class="content_view_central_list_li_right">
										<view class="content_view_central_list_li_right_li">
											总面积: {{content.farmTotalArea}} 平方米
										</view>
										<view class="xian"></view>
										<view class="content_view_central_list_li_right_li">
											传统栏舍: {{content.farmTraditionalHurdles}} 平方米
										</view>
										<view class="xian"></view>
										<view class="content_view_central_list_li_right_li">
											高架床面积: {{content.farmElevatedBed}} 平方米
										</view>
										
										<view class="xian"></view>
										<view class="content_view_central_list_li_right_li">
											低架床面积: {{content.farmLowBed}} 平方米
										</view>
										
									</view>
								</view>
								<view class="content_view_central_list_li">
									 <view class="content_view_central_list_li_left"
									style="height: 150rpx;background-color: #7aafef;">
										<p>沼气池</p>
									 </view>
									 <view class="content_view_central_list_li_right">
										 <view class="content_view_central_list_li_right_li">
											<view class="content_view_central_list_li_right_li">
												体积: {{content.farmBiogasDigester}} 立方米
											</view> 
										
										 </view>
										 
									 </view>
								</view>
								<view class="content_view_central_list_li">
									 <view class="content_view_central_list_li_left"
									  style="background-color: #9f8e61;">
										<p>生态化改造</p>
									 </view>
									 <view class="content_view_central_list_li_right">
										 
										<view class="content_view_central_list_li_right_li">
											储液池面积: {{content.farmStorageTank}} 亩
										</view>
										
										 <view class="xian"></view>
										 <view class="content_view_central_list_li_right_li">
										 	储粪房面积: {{content.farmSepticTank}} 亩
										 </view>									 
										 
										 <view class="xian"></view>
										 <view class="content_view_central_list_li_right_li">
										 	是否使用干清粪:　 {{content.farmDryExcrement}} 
										 </view>
										 <view class="xian"></view>
										 <view class="content_view_central_list_li_right_li">
										 	是否使用益生菌:　 {{content.farmUseProbiotics}} 
										 </view>
										 <view class="xian"></view>
										 <view class="content_view_central_list_li_right_li">
										 	是否进行改水:　　 {{content.farmWaterImprovement}} 
										 </view>
										 <view class="xian"></view>
										 <view class="content_view_central_list_li_right_li">
										 	是否完成改造: 　　{{content.farmTransformation}} 
										 </view>
									 </view>
								</view>
								<view class="content_view_central_list_li">
									 <view class="content_view_central_list_li_left"
									 style="background-color: #d7b358;">
										<p>粪污处理</p>
									 </view>
									 <view class="content_view_central_list_li_right">
										 <view class="content_view_central_list_li_right_li2">
											 <view class="content_view_central_list_li_right_li2_p1" style="margin: 20rpx 66% 20rpx 4%;">自有土地消纳</view>
											 <view class="content_view_central_list_li_right_li2_p2">2018年1月至统计当月消纳量:{{content.Own}}吨</view>
											 <view class="content_view_central_list_li_right_li2_p3">
												 <view class="content_view_central_list_li_right_li2_p3_left">
													 种植作物:{{content.farmRaiseCrops}}
												 </view>
												 <view class="content_view_central_list_li_right_li2_p3_right">
													 面积:{{content.farmTotalConsumption}}亩
												 </view>
											 </view>
										 </view>
										 <view class="xian"></view>
										 <view class="content_view_central_list_li_right_li2">
										 	<view class="content_view_central_list_li_right_li2_p1" style="margin: 20rpx 61% 20rpx 4%;">委托第三方处理</view>
										 	<view class="content_view_central_list_li_right_li2_p2">第三方名称:{{content.otherNames}}</view>
										 	<view class="content_view_central_list_li_right_li2_p2">第三方联系方式:{{content.otherPhone}}</view>
										 	<view class="content_view_central_list_li_right_li2_p2">第三方收运周期:{{content.otherCycle}}天</view>
										 </view>
									 </view>
								</view>
							</view>
						
						
						
						
						
						
						
						
						
					</swiper-item>					
				</swiper>
				</view>
			</view>
			
			
			
			
			
		</view>
	</view>
</template>
 -->
// <script>
// 	export default {
// 		data() {
// 			return {
// 				tabIndex: 0,
// 				/* 选中标签栏的序列,默认显示第一个 */
// 				contentList: [ ],
				
// 				city:'玉林',
// 				county:'玉州',
// 				town:'东镇',
// 				village:'东村',
// 				personal:'养殖场1',
// 				cadres_name:'张三',/*干部名字*/
// 				cadres_phone:'17675599557',/*干部电话*/
			
				
// 				tabBars: []
// 			}
// 		},
// 		onLoad() {
// 			this.getdata();
// 		},
// 		methods: {
			
// 			//切换选项卡
// 			toggleTab(index) {
// 				this.tabIndex = index;
				
// 			},
			
// 			//滑动切换swiper
// 			tabChange(e) {
// 				console.log(e);
// 				this.tabIndex = e.detail.current;
// 			},
// 			getdata(){
// 				console.log(this.User.userRight)
// 				uni.request({
// 					url: this.confige.webUrl+'/statistics/getVillageList',
// 					method: 'GET',
// 					data:{
// 						// farmCounty:"玉州区"
// 					},
// 					header: {
// 						"X-Token":this.User.token
// 					},
// 					success: (res) => {
// 						console.log(res)
						
// 						let list = res.data.result[0].list;
// 						this.contentList = list;
// 						this.tabBars = list;
						
// 					}
					
// 				});
// 			},
			
// 		}
// 	}
// </script>

 <style>
	p{
		margin: 0;
		padding: 0;
	}
	.content {
		width: 100%;
		height: auto;
		background-color: #f1f2f3;
		
	}
	.cadres_li{
		font-size: 30rpx;
		margin: 10rpx 0 0 5%;
	}
	
	/*搜索模块*/
	.search  {
		display:flex ;
		top: 0;
		left: 0;
		width: 100%;
		height: 88rpx;
		margin: 20rpx auto;
		/* background-color: #007AFF; */
	}
	.search_li{
		flex:5;
		border: 2rpx solid #c3c3c3;
		height: 70rpx;
		border-radius: 10rpx;
		margin: 14rpx 40rpx;
		display:flex ;
		/* background-color: #000000; */
	}
	.search_li_size{
		flex: 3;
		font-size: 40rpx;
	    margin-left: 3%;
		color: #c2c2c2;
		
	}
	
	
	
	.content_view {
		width: 90%;
		height: auto;
		margin: 12rpx 5% 12rpx 5%;
	}
	.content_view_head{
		width: 100%;
		height: auto;
		
	}

	.content_view_head_left {
		width: 45%;
		height: auto;
		font-size: 30rpx;
		float: left;
		margin: 0 0 0 20rpx;
		text-align: center;
		border-left: 15rpx solid #4ac997;
		
	}

	.content_view_head_right {
		font-size: 30rpx;
		margin: 0 0 0 75%;
		text-align: center;
		border-radius: 10rpx;
		color: #02a7f0;
	}

	.address {
		display:flex ;
		width: 100%;
		height: auto;
		padding: 10rpx 0 10rpx 5%;
		background-color: #f1f2f3;
	}

	.city {
		font-size: 40rpx;
	}
	.hen{
		font-size: 40rpx;
	}
	.county,.town,.village,.personal{
		font-size: 40rpx;
	}

	.horizonal-tab {
		
	}

	.horizonal-tab .active {
			color: #000000;
		}
	
		.scroll-tab {
			white-space: nowrap;
			/* 必要，导航栏才能横向*/
			border-bottom: 1rpx solid #eee;
			text-align: center;
			background-color: #FFFFFF;
	
		}
	
		.scroll-tab-item {
			color: #b8b8b8;
			display: inline-block;
			/* 必要，导航栏才能横向*/
			margin: 20rpx 30rpx 0 30rpx;
			font-size: 36rpx;
			
		}
	
		.active .scroll-tab-line {
			border-bottom: 5rpx solid #4ac997;
			border-top: 5rpx solid #4ac997;
			border-radius: 20rpx;
			width: 100%;
			
		}
	
	
	.content_view_central_list{
		width: 100%;
		height: auto;		
		display:flex ;
		flex-direction: column;
		
	}
	.content_view_central_list_li{
		width: 100%;
		display:flex ;
		height: auto;		
		background-color: #FFFFFF;
		margin-top: 25rpx;
		border-radius: 18rpx;
		
		display: flex;
		/* align-items: center; */
	}
	.content_view_central_list_li_left{
		flex: 1;
		width: 80rpx;
		border-radius: 18rpx 0 0 18rpx;
		
		
		display:flex;
		justify-content: center;
		align-items: center;
		writing-mode:tb-rl;
	}
	.content_view_central_list_li_left>p{
		/* margin:auto; */
		/* writing-mode:tb-rl; */
		color: #FFFFFF;
		font-size: 30rpx;
		
	}
	
	
	.content_view_central_list_li_right{
		flex: 8;
		margin: auto 0;
		
		/* background-color: #007AFF; */
	}
	.content_view_central_list_li_right_li{
		margin: 15rpx 0 15rpx 4%;
		font-size: 30rpx;
		display: flex;
		
	}
	.xian{
		width: 90%;
		height: 2rpx;
		background-color: #d9d9d9;
		margin-left: 4%;
	}
	
	/* 粪污处理样式 */
	.content_view_central_list_li_right_li2{
		width: 100%;
		height: auto;		
	}
	.content_view_central_list_li_right_li2_p1{		
		font-size: 30rpx;
		font-weight: bold;
		border-bottom: 2px solid #09BB07;
	}
	.content_view_central_list_li_right_li2_p2{
		margin: 20rpx 0 20rpx 4%;
		font-size: 30rpx;
	}
	.content_view_central_list_li_right_li2_p3{
		width: 96%;
		height: auto;
		display: flex;
		font-size: 30rpx;
		margin: 20rpx 0 20rpx 4%;
	}
	.content_view_central_list_li_right_li2_p3_left{
		flex: 1;
	}
	.content_view_central_list_li_right_li2_p3_right{
		flex: 1;
		text-align: center;
		margin-right: 4%;
	}
</style>
